class Draw {
    constructor(x, y, ctx, w, h) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.ctx = ctx;
    }
    drawLine() {
        this.ctx.strokeStyle = "#00FFFF";
        this.ctx.strokeRect(this.x,this.y,this.w,this.h);
        this.ctx.fill();
    }
    drawPoint(x,y,r,opacity,hasShadow = false){
        this.ctx.fillStyle = `rgba(0, 255, 255,${opacity})`;
        // if(hasShadow){
        //     this.ctx.fillStyle = `rgba(255, 255, 255,1)`;
        //     this.ctx.shadowOffsetX = 0;
        //     this.ctx.shadowOffsetY = 0;
        //     this.ctx.shadowBlur = 5;
        //     this.ctx.shadowColor = '#00FFFF';
        // }else{
        //     this.ctx.shadowBlur = opacity * 3;
        // }
        this.ctx.shadowBlur = opacity * 3;
        this.ctx.beginPath();
        if(!x){
            x = 0;
        }
        if(!y){
            y = 0;
        }
        if(!opacity && opacity != 0){
            opacity = 1;
        }
        this.ctx.arc(x,y, r, 0, 2 * Math.PI);
        this.ctx.closePath();
        this.ctx.fill();
    }
}
class Point extends Draw {
    constructor(x, y, ctx, w, h,canvasWidth,canvasHeight) {
        super(x, y, ctx, w, h);
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
        this.moveNum = 0;
    }
    init(){
        // 清空画布
        this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);
        new Draw(this.x, this.y, this.ctx, this.w, this.h).drawLine();
        this.drawContent();
    }
    draw(_elePointLeft,r,opacity = 0.8,hasShadow = false){
        let x = 0, y = 0;
        let elePointLeft = _elePointLeft;
        if(_elePointLeft >= (this.w * 2 + this.h * 2)){
            elePointLeft = _elePointLeft % (this.w * 2 + this.h * 2);
        }
        if(elePointLeft < this.w){
            x = elePointLeft + this.x;
            y = this.y;
        }
        if(elePointLeft > this.w && elePointLeft < (this.w + this.h)){
            x = this.w + this.x;
            y = elePointLeft - this.w + this.y;
        }
        if(elePointLeft > (this.w + this.h) && elePointLeft < (this.w * 2 + this.h)){
            x = (this.w + this.x) - (elePointLeft - (this.w + this.h));
            y = this.y + this.h;
        }
        if(elePointLeft > (this.w * 2 + this.h) && elePointLeft < (this.w * 2 + this.h * 2)){
            x = this.x;
            y = (this.w * 2 + this.h * 2) - elePointLeft + this.y;
        }
        new Draw(this.x, this.y, this.ctx, this.w, this.h).drawPoint(x,y,r,opacity,hasShadow);
    }
    drawContent() {
        for (let i = 0; i < 6; i++) {
            let eleInterval = (this.w * 2 + this.h * 2) / 6;
            let mainR = 3;
            let elePointLeft = this.moveNum + this.x + eleInterval * i + mainR + 100;
            this.draw(elePointLeft,mainR,0.8,true)
            this.drawChild(elePointLeft,mainR)
            
        }
    }
    drawChild(eleChidrenLeftPoint,mainPointR){
        // 每个元素长度为10个半圆
        let r = mainPointR;
        // let left = mainPointR - (mainPointR + mainPointR / 4)
        let left = mainPointR - (mainPointR)
        // let left = mainPointR
        let opacity = 1
        for (let i = 0; i < 50; i++) {
            r = r - mainPointR / 50;
            if(r < 1){
                r = 1
            }
            left = left + r
            opacity = opacity - mainPointR / 100;
            let elePointLeft = eleChidrenLeftPoint - left;
            this.draw(elePointLeft,r,opacity);
        }
    }
    
    move() {
        this.moveNum += 4;
        this.init();
    }
}
let obj = {};
/**
 * 
 * @param {*} x 相对容器的x轴坐标
 * @param {*} w  相对容器的y轴坐标
 * @param {*} width  容器宽度
 * @param {*} height  容器高度
 */ 
function init(width,height,x=10,w=10){
    let meteorCanvas = document.getElementById('meteor');
    let meteorCtx = meteorCanvas.getContext('2d');
    let canvasWidth = meteorCanvas.clientWidth * 1;
    let canvasHeight = meteorCanvas.clientHeight * 1; 
    meteorCanvas.width = canvasWidth;
    meteorCanvas.height = canvasHeight;

    obj = new Point(x,w,meteorCtx,width,height,canvasWidth,canvasHeight);
    obj.init();
    animate();
}
function animate() {
    obj.move()
    requestAnimationFrame(animate);
}
export default init;